<template>
  <div class="t-page">
    <transition name="el-zoom-in-top">
      <el-form v-show="searchTagVisible" :model="searchTagFrom" inline size="mini" ref="searchTagFrom" @keyup.enter.native="searchTagHandle">
        <el-form-item prop="word" label="标签名称">
          <el-input v-model="searchTagFrom.word" @clear="getTagList" clearable placeholder="请输入标签名称" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="dataLoad" @click="searchTagHandle" type="primary"  icon="el-icon-search">查询</el-button>
          <el-button :disabled="dataLoad" @click="resetTagPageHandle" plain icon="el-icon-refresh-right"
                     class="reset-menu">重置</el-button>
        </el-form-item>
      </el-form>
    </transition>

    <div class="t-tool">
      <el-button :disabled="dataLoad" @click="$refs.tagApplyDialog.init()"
                 type="primary" size="mini" plain icon="el-icon-plus">申请标签</el-button>

      <right-tool-bar :search-visible="searchTagVisible" @toggle-search="searchTagVisible = !searchTagVisible"
                      @refresh-table="getTagList" />
    </div>

    <el-table
      v-loading="dataLoad"
      element-loading-text="博客标签加载中..."
      element-loading-spinner="el-icon-loading"
      :data="tagList"
      :default-sort="{ prop: searchTagFrom.field, order: searchTagFrom.order }"
      @sort-change="sortChangeHandle"
      @selection-change="val => this.tagTableSelected = val"
      ref="tagTable"
    >
      <el-table-column prop="name" header-align="center" align="center" label="标签名字"></el-table-column>
      <el-table-column prop="sort" sortable :sort-orders="sortOrders" header-align="center" align="center" label="排序等级"></el-table-column>
      <el-table-column prop="status" label="状态" align="center" width="80">
        <template v-slot="scope">
          <el-tag type="info" :class="'m-status' + scope.row.status">
            {{ scope.row.status === 0 ? '可用' : '不可用'  }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" sortable :sort-orders="sortOrders" header-align="center" align="center" label="创建时间"></el-table-column>
    </el-table>

    <!-- 表格分页插件 -->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="searchTagFrom.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="searchTagFrom.limit"
      :total="totalNum"
      :disabled="dataLoad"
      layout="total, sizes, prev, pager, next, jumper"
      class="paging">
    </el-pagination>

    <!-- 博客标签申请弹出框 -->
    <tag-apply ref="tagApplyDialog" />
  </div>
</template>

<script>
  import RightToolBar from '@/components/common/right-toolbar'
  import TagApply from "@/components/blog/tag/apply";

  export default {
    layout: 'admin',
    name: "admin-tag-list",
    components: { RightToolBar, TagApply },
    data() {
      return {
        // 标签列表
        tagList: [],
        // 标签表格被选中的‘行’数据
        tagTableSelected: [],
        // 表格排序字段排序方式
        sortOrders: ['ascending', 'descending'],
        // 数据是否加载[false-不加载 true-加载]
        dataLoad: false,
        // 标签检索是否显示
        searchTagVisible: true,
        // 空间检索表单对象
        searchTagFrom: {
          // 标签检索内容
          word: '',
          // 当前展示页码
          page: 1,
          // 当前页显示个数
          limit: 10,
          // 排序字段
          field: 'sort',
          // 排序方式
          order: 'ascending'
        },
        // 当前博客数量
        totalNum: 0,
        // 标签申请弹出框是否显示
        tagApplyDialog: false,
        // 是否拥有标签操作权限
        tagOptRole: false,
      }
    },
    // asyncData({ app, params, query}) {
    //   return app.$axios.$post('/blog/tag/list', { page: 1, limit: 10, field: 'sort', order: 'ascending' })
    //     .then(data => {
    //       return {
    //         tagList: data.page.list,
    //         totalNum: data.page.totalNum
    //       }
    //     })
    //     .catch(() => {})
    // },
    created() {
      if (process.client) {
        this.getTagList();
      }
    },
    methods: {
      /**
       * 标签检索事件
       */
      searchTagHandle() {
        this.searchTagFrom.page = 1;

        this.getTagList();
      },
      /**
       * 获取博客标签列表事件
       */
      getTagList() {
        // 表格数据加载
        this.dataLoad = true
        this.$axios.$post('/blog/tag/page/list', this.searchTagFrom)
          .then(({ data:page }) => {
            this.tagList = page.list;
            this.totalNum = page.totalNum;
          })
          .catch(() => {})
          .finally(() => {
            // 表格加载结束
            this.dataLoad = false;
          })
      },
      /**
       * 每页显示个数变化事件
       * @param {number} size 最新显示个数
       */
      sizeChangeHandle(size) {
        this.searchTagFrom.page = 1;
        this.searchTagFrom.limit = size;

        this.getTagList();
      },
      /**
       * '点击特定页码'、'上一页'、'下一页'操作事件
       * @param {number} index 最新页码
       */
      currentChangeHandle(index) {
        if (this.searchTagFrom.page === index) {
          return
        }
        this.searchTagFrom.page = index;
        this.getTagList();
      },
      /**
       * 表格选择字段排序事件
       * @param {string} prop  字段
       * @param {string} order 排序方式
       */
      sortChangeHandle( { prop, order } ) {
        // console.log('prop', prop);
        // console.log('order', order);
        this.searchTagFrom.field = prop;
        this.searchTagFrom.order = order;
        this.getTagList();
      },
      /**
       * 重置页面事件
       */
      resetTagPageHandle() {
        // 重置标签查询表单
        this.$refs['searchTagFrom'].resetFields();
        this.searchTagFrom.page = 1;
      }
    }
  }
</script>

<!--
  css字符对应
  m -> manage
  t -> tag
-->
<style scoped>
  .t-page .t-tool {
    margin-bottom: 7px;
  }
  .t-page .paging {
    float: right;
    margin: 7px;
  }
  .t-page .m-status0 {
    color: #6CBCBC;
  }
  .t-page .m-status1 {
    color: #cba457;
  }
</style>
